<template>
	<view class="message-container">
		<!-- 选项卡 -->
		<view class="tabs-container">
			<view class="tab-item" 
				v-for="(tab, index) in tabList" 
				:key="index"
				:class="{ active: currentTab === index }"
				@click="switchTab(index)"
			>
				<text class="tab-text">{{ tab.name }}</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 系统通知 -->
			<view v-if="currentTab === 0" class="tab-content">
				<view class="empty-state">
					<view class="empty-icon">
						<text class="icon-text">🔔</text>
					</view>
					<text class="empty-text">暂无通知记录</text>
				</view>
			</view>
			
			<!-- 平台公告 -->
			<view v-if="currentTab === 1" class="tab-content">
				<view class="empty-state">
					<view class="empty-icon">
						<text class="icon-text">📢</text>
					</view>
					<text class="empty-text">暂无公告记录</text>
				</view>
			</view>
			
			<!-- 客服消息 -->
			<view v-if="currentTab === 2" class="tab-content">
				<view class="empty-state">
					<view class="empty-icon">
						<text class="icon-text">💬</text>
					</view>
					<text class="empty-text">暂无客服消息</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0, // 默认显示系统通知
				tabList: [
					{ name: '系统通知' },
					{ name: '平台公告' },
					{ name: '客服消息' }
				]
			}
		},
		methods: {
			// 切换标签
			switchTab(index) {
				this.currentTab = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
.message-container {
	min-height: 100vh;
	background-color: #fff;
}

.tabs-container {
	display: flex;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	padding: 0 40rpx;
	
	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		position: relative;
		
		.tab-text {
			font-size: 32rpx;
			color: #999;
			transition: color 0.3s ease;
		}
		
		&.active {
			.tab-text {
				color: #333;
				font-weight: 500;
			}
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 6rpx;
				background-color: #ff4757;
				border-radius: 3rpx;
			}
		}
	}
}

.content {
	flex: 1;
	
	.tab-content {
		min-height: 60vh;
		
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 200rpx 40rpx;
			
			.empty-icon {
				margin-bottom: 60rpx;
				
				.icon-text {
					font-size: 120rpx;
					color: #ccc;
				}
			}
			
			.empty-text {
				font-size: 28rpx;
				color: #999;
				text-align: center;
			}
		}
	}
}
</style> 